<!--
  - Copyright (c) 2019.  武汉中科图灵科技有限公司
  - Date :  2019/1/5
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.6.2
  -->

<template>
  <div class="app-container calendar-list-container no-padding hardware-dailog">
    <el-container>
      <el-container>
        <div class="flex-left-pannel">
          <el-row>
            <div class="xf-tabletop-handles">
              <div class="xf-tabhd-left">
                <el-button class="filter-item" @click="handleCreate" type="primary" size="mini">添加室外消火栓</el-button>
              </div>
              <div class="xf-tabhd-right">
                消火栓名称
                <el-input v-model="listQuery.hydrantName" placeholder="请输入消火栓名称" class="xf-query-input" size="mini"></el-input>
                <el-button @click="tableQuery" type="primary" size="mini">查询</el-button>
                <el-popover
                  placement="bottom-end"
                  width="700"
                  class="xf-custom-poper"
                  v-model="visible2">
                  <div class="xf-double-form">
                    <div class="xf-dbform-item">
                      <div class="xf-dbform-item__sleft">
                        <p class="xf-dbform-item__label">消火栓类型</p>
                        <el-select placeholder="请选择类型" v-model="slistQuery.hydrantType">
                          <el-option label="全部" value="-1"></el-option>
                          <el-option label="地下式" value="0"></el-option>
                          <el-option label="地上式" value="1"></el-option>
                          <el-option label="直埋伸缩" value="2"></el-option>
                        </el-select>
                      </div>
                      <div class="xf-dbform-item__sright">
                        <p class="xf-dbform-item__label">出水口</p>
                        <el-select placeholder="请选择类型" v-model="slistQuery.outlet">
                          <el-option label="全部" value="-1"></el-option>
                          <el-option label="单口式" value="0"></el-option>
                          <el-option label="双口式" value="1"></el-option>
                          <el-option label="三出水口式" value="2"></el-option>
                        </el-select>
                      </div>
                    </div>
                    <div class="xf-dbform-item">
                      <div class="xf-dbform-item__sleft">
                        <p class="xf-dbform-item__label">水管道</p>
                        <el-select placeholder="请选择类型" v-model="slistQuery.waterPipe">
                          <el-option label="全部" value="-1"></el-option>
                          <el-option label="高压给水" value="0"></el-option>
                          <el-option label="临时高压给水" value="1"></el-option>
                          <el-option label="低压给水" value="2"></el-option>
                        </el-select>
                      </div>
                      <div class="xf-dbform-item__sright">
                        <p class="xf-dbform-item__label">位置标记</p>
                        <el-select placeholder="请选择类型" v-model="slistQuery.gis">
                          <el-option label="全部" value="-1"></el-option>
                          <el-option label="未标记" value="0"></el-option>
                          <el-option label="已标记" value="1"></el-option>
                        </el-select>
                      </div>
                    </div>
                    <div class="xf-dbform-item">
                      <div class="xf-dbform-item__sleft">
                        <p class="xf-dbform-item__label">位置描述</p>
                        <el-input v-model="slistQuery.positionDescription" placeholder="请输入位置描述"></el-input>
                      </div>

                    </div>
                  </div>
                  <div style="text-align: left; margin: 0; margin-top:20px;">
                    <el-button size="mini" type="primary" @click="pointerQuery">查询</el-button>
                    <el-button @click="visible2 = false" type="text">取消</el-button>
                  </div>
                  <el-button slot="reference" size="mini" type="text">高级查询</el-button>
                </el-popover>
              </div>
            </div>
          </el-row>
          <el-table
            key='tableKey'
            :data="list"
            v-loading.body="listLoading" style="width: 100%">
            <el-table-column label="消火栓名称">
              <template slot-scope="scope">
                <span>{{scope.row.hydrantName}}</span>
              </template>
            </el-table-column>
            <el-table-column label="所属区域">
              <template slot-scope="scope">
                <span>{{scope.row.area}}</span>
              </template>
            </el-table-column>
            <el-table-column label="消火栓类型">
              <template slot-scope="scope">
                <span>{{scope.row.hydrantType}}</span>
              </template>
            </el-table-column>
            <el-table-column label="出水口">
              <template slot-scope="scope">
                <span>{{scope.row.outlet}}</span>
              </template>
            </el-table-column>
            <el-table-column label="水管道">
              <template slot-scope="scope">
                <span>{{scope.row.waterPipe}}</span>
              </template>
            </el-table-column>
            <el-table-column label="保护半径(m)">
              <template slot-scope="scope">
                <span>{{scope.row.protectionRadius}}</span>
              </template>
            </el-table-column>
            <el-table-column label="位置描述">
              <template slot-scope="scope">
                <span>{{scope.row.positionDescription}}</span>
              </template>
            </el-table-column>
            <el-table-column label="位置标记">
              <template slot-scope="scope">
                <span v-if="scope.row.gis==='已标记'">已标记</span>
                <span v-else style="color:#FF9800;cursor: pointer">未标记</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="130" fixed="right">
              <template slot-scope="scope">
                <span @click="handleUpdate(scope.row)" class="comm-table-btn"><icon-svg icon-class="bianji" style="fill:#50E3C2" /></span>
                <span @click="createDel(scope.row)" class="comm-table-btn"><icon-svg icon-class="shanchu" style="fill:#50E3C2" /></span>
              </template>
            </el-table-column>
          </el-table>
          <div v-show="!listLoading" class="sensor-pagination-container">
            <div></div>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[10,15,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
          </div>
        </div>
      </el-container>
      <el-aside width="250px" class="flex-right-pannel_withline">
        <el-scrollbar style="height:85vh">
          <div class="comm-tree-wrap">
            <div class="wrap-with-halfboder"></div>
            <p class="right-tree-title"><i class="el-icon-caret-right"></i>区域列表</p>
          <el-button type="text" @click="viewAllTree" style="padding-left:5px;color: rgba(255, 255, 255, 0.7);">查看全部</el-button>
          <el-tree class="filter-tree" :data="treeData" node-key="code" highlight-current :expand-on-click-node='false' :props="defaultProps" ref="cityTree" @current-change="changeClick" default-expand-all>
          </el-tree>
          </div>
        </el-scrollbar>
      </el-aside>
    </el-container>
    <slider-panel :Show.sync="isaddsensor" custom-class="out-side-frame">
      <div class="form-content-frame">
        <el-form :model="hardwareForm" ref="addhardwareform" :rules="hardwarerules" label-width="100px" label-position='top' @submit.native.prevent>
          <el-form-item label="消火栓名称" prop="hydrantName">
            <el-input v-model.trim="hardwareForm.hydrantName" placeholder="请输入消火栓名称"></el-input>
          </el-form-item>
          <el-form-item label="所属区域" prop="czxqy">
            <el-cascader
              :options="entityOptions"
              v-model="hardwareForm.czxqy"
              filterable
              :clearable = 'true'
              style="width:100%;">
            </el-cascader>
          </el-form-item>
          <el-form-item label="保护半径(m)" prop="protectionRadius">
            <el-input v-model.number="hardwareForm.protectionRadius" placeholder="请输保护半径" type="number"></el-input>
          </el-form-item>
          <el-form-item label="经度/纬度" prop="gis">
            <el-input v-model="hardwareForm.gis==''?'未标记':'已标记'" :disabled="true">
              <el-button slot="append" icon="el-icon-location" @click="markGis">标记地点</el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="出水口" prop="outlet">
            <el-select v-model="hardwareForm.outlet" placeholder="请选择" style="width:100%;">
              <el-option label="单口式" value="0"></el-option>
              <el-option label="双口式" value="1"></el-option>
              <el-option label="三出水口式" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="第一出水口" prop="outletTypeOne" :rules="{required: true, message: '必选项', trigger: 'blur'}"
                        v-if="hardwareForm.outlet==='0'||hardwareForm.outlet==='1'||hardwareForm.outlet==='2'">
            <el-select v-model="hardwareForm.outletTypeOne" placeholder="请选择">
              <el-option label="外螺旋式" value="0"></el-option>
              <el-option label="内扣式" value="1"></el-option>
            </el-select>
            <el-input v-model.number="hardwareForm.outletValueOne" placeholder="mm" type="tel" style="width: 240px;margin-left: 10px;" maxlength="9" ></el-input>
          </el-form-item>
          <el-form-item label="第二出水口" prop="outletTypeTwo" :rules="{required: true, message: '必选项', trigger: 'blur'}"
                        v-if="hardwareForm.outlet==='2'||hardwareForm.outlet==='1'">
            <el-select v-model="hardwareForm.outletTypeTwo" placeholder="请选择">
              <el-option label="外螺旋式" value="0"></el-option>
              <el-option label="内扣式" value="1"></el-option>
            </el-select>
            <el-input v-model.number="hardwareForm.outletValueTwo" placeholder="mm" type="tel" style="width: 240px;margin-left: 10px;" maxlength="9"></el-input>
          </el-form-item>
          <el-form-item label="第三出水口" prop="outletTypeThree" :rules="{required: true, message: '必选项', trigger: 'blur'}"
                        v-if="hardwareForm.outlet==='2'">
            <el-select v-model="hardwareForm.outletTypeThree" placeholder="请选择">
              <el-option label="外螺旋式" value="0"></el-option>
              <el-option label="内扣式" value="1"></el-option>
            </el-select>
            <el-input v-model.number="hardwareForm.outletValueThree" placeholder="mm" type="tel" style="width: 240px;margin-left: 10px;" maxlength="9"></el-input>
          </el-form-item>
          <el-form-item label="联网单位" prop="oid">
            <el-select v-model="hardwareForm.oid" placeholder="请选择" style="width:100%;">
              <el-option
                v-for="item in netFacilities"
                :key="item.id"
                :label="item.oname"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="消火栓类型" prop="hydrantType">
            <el-select v-model="hardwareForm.hydrantType" placeholder="请选择" style="width:100%;">
              <el-option label="地下式" value="0"></el-option>
              <el-option label="地上式" value="1"></el-option>
              <el-option label="直埋伸缩" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="水管道" prop="waterPipe">
            <el-select v-model="hardwareForm.waterPipe" placeholder="请选择" style="width:100%;">
              <el-option label="高压给水" value="0"></el-option>
              <el-option label="临时高压给水" value="1"></el-option>
              <el-option label="低压给水" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="位置描述" prop="positionDescription">
            <el-input v-model.trim="hardwareForm.positionDescription"></el-input>
          </el-form-item>
            <el-button v-if="dialogStatus=='create'" type="primary" @click="saveHardware('addhardwareform')" size="mini" native-type="submit">确 定</el-button>
            <el-button v-else type="primary" @click="updateSensor('addhardwareform')" size="mini" native-type="submit">确 定</el-button>
            <el-button @click="hardwareForm.hydrantName!==''?isquit=true:cancelAddSensor('addhardwareform')" type="text">取 消</el-button>
        </el-form>
      </div>
    </slider-panel>
    <el-dialog title="退出提示" :visible.sync="isquit" :show-close='false' custom-class="xf-jc-dialog" width="360px" height="160px">
      <div class="xf-jc-deletect">
        <p>内容已被修改，退出将不会保留修改内容</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" size="mini" @click="isquit=false;cancelAddSensor('addhardwareform');">确定</el-button>
        <el-button size="mini" @click="isquit=false">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="删除室外消火栓" :visible.sync="dialogDeleteVisible" :show-close='false' custom-class="xf-jc-dialog" width="360px">
      <div class="xf-jc-deletect">
        <p>有{{hardwareNum}}个室外传感器绑定了此室外消火栓，删除前请先解绑传感器。</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini"  @click="dialogDeleteVisible = false">知道了</el-button>
      </div>
    </el-dialog>
    <el-dialog title="删除室外消火栓" :visible.sync="isdelsensor" :show-close='false' custom-class="xf-jc-dialog" width="360px" height="160px">
      <div class="xf-jc-deletect">
        <p>确定删除消火栓“{{delhardwaretext}}”吗？</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" size="mini" @click="handleDelete(currowid)">删除</el-button>
        <el-button type="text" @click="isdelsensor=false">取消</el-button>
      </div>
    </el-dialog>
    <mapMarker :Show.sync="mapMarkVisible" @getMark="getMark" :gis="hardwareForm.gis" :maptitle="maptitle"></mapMarker>
  </div>
</template>
<script>
  import {
    fetchTree,
    firstBuild,
    page,
    getNetworkAll,//联网单位
    addObj,
    updateObj,//编辑数据更新
    deletQuery,
    delObj
    // getObj,
    // delObj,

  } from "@/api/device/hardwareSet/index";
  import { regionData } from 'element-china-area-data';
  import mapMarker from "@/components/mapMark";
  import sliderPanel from '@/components/SliderPanel'

  export default {
    name: "hardwareTab",
    components:{mapMarker,sliderPanel},
    data() {
      return {
        visible2:false,
        mapMarkVisible:false,
        currowid:'',
        maptitle:'',
        netFacilities:[],
        showdownload: false,
        delhardwaretext:'',
        hardwareNum:0,
        isquit:false,
        isactiondata:false,
        isdelsensor:false,
        sensorid:"",
        channelId:"",
        delsensortext:"",
        styleObject:{
          left:"10px",
          top:"10px"
        },
        treeData: [],
        defaultProps: {
          children: "childList",
          label: "name"
        },
        firstSelected: undefined,
        list: [],
        total: null,
        listLoading: false,
        slistQuery:{
          hydrantType:'-1',
          outlet:'-1',
          waterPipe:'-1',
          gis:'-1',
          positionDescription:'',
        },
        listQuery: {
          page: 1,
          limit: 15,
          hydrantName: undefined,
          code: '-1'
        },
        systems:[],
        floors:[],
        dialogFormVisible: false,
        dialogDeleteVisible: false,
        uploadparams:undefined,
        currentSelectObj: {},
        dialogStatus: "",
        textMap: {
          update: "编辑室外消火栓",
          create: "添加室外消火栓"
        },
        tableKey: 0,
        isaddsensor:false,

        entityOptions:[],//地区选择组件内容
        buildName:"",
        curfloor:"",
        delsensorid:[],
        hardwareForm:{
          hydrantName:'',
          czxqy:[],
          protectionRadius:100,
          gis:'',
          outlet:'',
          outletTypeOne:undefined,
          outletValueOne:undefined,
          outletTypeTwo:undefined,
          outletValueTwo:undefined,
          outletTypeThree:undefined,
          outletValueThree:undefined,
          oid:'',
          hydrantType:'',
          waterPipe:'',
          positionDescription:"",
        },
        hardwarerules: {
          hydrantName: [
            {
              required: true,
              message: "请输入消火栓名称",
              trigger: "blur"
            },
            {
              min: 1,
              max: 30,
              message: "最多允许输入30个字符",
              trigger: "blur"
            }
          ],
          czxqy:[
            {
              required: true,
              message: '请选择所属区域',
              trigger: 'change'
            }
          ],
          protectionRadius:[
            {
              required: true,
              message: '请输入保护半径',
              pattern: /.+/,
              trigger: 'blur'
            },
            {
              type: 'number',
              min: 100,
              max: 150,
              message: "输入范围为100-150",
              trigger: "blur"
            }
          ],
          gis:[
            {
              required: true,
              message: '请选择经纬度',
              trigger: 'change'
            }
          ],
          outlet:[
            {
              required: true,
              message: '请选择出水口',
              trigger: 'change'
            }
          ],
          positionDescription:[
            {
              type:'string',
              max:50,
              message:'最多允许输入50个字符',
              trigger: "change"
            }
          ]
        },
      };
    },
    created() {
      this.initLoad();
    },
    methods: {
      viewAllTree(){
        this.$refs.cityTree.setCurrentKey(null);
        this.showdownload = false;
        this.listLoading = true;
        this.listQuery.code = '-1';
        this.getList();
      },
      goUnbind(){
        this.$router.push({path:'/hydrant/fireDeviceManger/'+this.$route.params.id})
      },
      markGis(){
        this.maptitle="添加消火栓";
        this.mapMarkVisible=true
      },
      getMark(val){
        this.hardwareForm.gis=val;
        this.mapMarkVisible=false;
      },
      pointerQuery(){
        // 高级查询
        this.visible2 = false;
        this.listLoading = true;
        // 取消绑定并合并查询条件
        let contactKeys = Object.assign(JSON.parse(JSON.stringify(this.listQuery)),JSON.parse(JSON.stringify(this.slistQuery)))
        page(contactKeys).then(response => {
          this.list = response.data.rows;
          this.total = response.data.total;
          this.listLoading = false;
        });
      },

      tableQuery() {
        this.getList();
      },
      handleCreate() {
        this.dialogStatus = "create";
        this.isaddsensor = true;
        this.handlerest();
        this.entityOptions = regionData;
        getNetworkAll().then(res=>{
           //获取联网单位
           this.netFacilities = res.data.oName
        });
      },
      cancelAddSensor(formName) {
        const set = this.$refs;
        set[formName].resetFields();
        this.hardwareForm.positionSign="";
        this.handlerest();
        this.isaddsensor = false;
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      },
      initLoad() {
        let self=this;
        fetchTree().then(data => {
          if (data.data.length!==0) {
            this.treeData = data.data;
            this.getList();
            self.listLoading = false;
          }
        })
      },
      getList() {
        this.listLoading = true;
        page(this.listQuery).then(response => {
          this.list = response.data.rows;
          this.total = response.data.total;
          this.listLoading = false;
        }).catch(()=>{
          this.listLoading = false;
        })
      },
      changeClick(data) {
        if (data.childList) {
          // 如果有下层，隐藏下载按钮
          this.showdownload = false;
          this.listLoading = true;
          this.listQuery.code = data.code;
          page(this.listQuery).then(data => {
            this.list = data.data.rows;
            this.total = data.data.total;
            this.listLoading = false;
          }).catch(()=>{
            this.listLoading = false;
          })
        } else {
          this.showdownload = true;
          this.listLoading = true;
          this.buildName=data.name;
          this.listQuery.code = data.code;
          page(this.listQuery).then(data => {
            this.list = data.data.rows;
            this.total = data.data.total;
            this.listLoading = false;
          }).catch(()=>{
            this.listLoading = false;
          })
        }
      },
      handlerest(){
        this.hardwareForm.hydrantName='';
        this.hardwareForm.czxqy=[];
        this.hardwareForm.protectionRadius=100;
        this.hardwareForm.gis='';
        this.hardwareForm.outlet='' ;
        this.hardwareForm.oid = '';
        this.hardwareForm.hydrantType = '';
        this.hardwareForm.waterPipe = '';
        this.hardwareForm.positionDescription='';
        this.hardwareForm.outletTypeOne = undefined;
        this.hardwareForm.outletValueOne = undefined;
        this.hardwareForm.outletTypeTwo = undefined;
        this.hardwareForm.outletValueTwo = undefined;
        this.hardwareForm.outletTypeThree = undefined;
        this.hardwareForm.outletValueThree = undefined;
      },
      saveHardware(formName){
        const set = this.$refs;
        set[formName].validate(valid => {
          if (valid) {
            this.hardwareForm.zxqy = JSON.parse(JSON.stringify(this.hardwareForm.czxqy[this.hardwareForm.czxqy.length-1]));
            addObj(Object.assign({},this.hardwareForm)).then(() => {
              set[formName].resetFields();
              this.handlerest();
              this.getList();
              //更新右侧列表
              this.initLoad();
              this.$notify({
                title: "成功",
                message: "创建成功",
                type: "success",
                duration: 2000
              });
              this.isaddsensor = false;
            });
          } else {
            return false;
          }
        });
      },
      handleUpdate(row){
        //编辑
        this.dialogStatus = "update";
        this.isaddsensor = true;
        this.entityOptions = regionData;
        getNetworkAll({id:row.id}).then((res)=>{
          //获取联网单位
          this.netFacilities = res.data.oName;
          let backdata = res.data.deviceHardwareFacilities;
         //回填数据
          this.hardwareForm = backdata;
          this.hardwareForm.czxqy = backdata.zxqy.split(",");
        });
      },
      updateSensor(formName){
        const set = this.$refs;
        set[formName].validate(valid => {
          if (valid) {
            this.hardwareForm.zxqy = JSON.parse(JSON.stringify(this.hardwareForm.czxqy[this.hardwareForm.czxqy.length-1]));
            updateObj(Object.assign({},this.hardwareForm)).then(() => {
              this.getList();
              //更新右侧列表
              this.initLoad();
              this.$notify({
                title: "成功",
                message: "更新成功",
                type: "success",
                duration: 2000
              });
              set[formName].resetFields();
              this.handlerest();
              this.isaddsensor = false;
            });
          } else {
            return false;
          }
        });
      },
      createDel(row){
        this.currowid = row.id;
        deletQuery({id:row.id}).then((res)=>{
          if (res.data>0){
            this.hardwareNum = res.data;
            this.dialogDeleteVisible = true;
          } else {
            this.delhardwaretext = row.hydrantName;
            this.isdelsensor=true;
          }
        })
      },
      handleDelete(){
        delObj({id:this.currowid}).then(res=>{
          this.$notify({
            title: "成功",
            message: "删除成功",
            type: "success",
            duration: 2000
          });
          this.isdelsensor=false;
          this.listQuery.page = 1;
          this.getList();
          this.initLoad();
        })
      },
    },
    mounted() {

    },
    watch:{
    }
  };
</script>
<style rel="stylesheet/scss" lang="scss">
  // 随机色背景剪切
  .dot-circl {
    background: currentColor;
    clip-path: circle(11%);
  }
  .flex-right-pannel_withline {
    border-left: 1px solid transparent;
    min-height: 86vh;
    box-sizing: border-box;
    padding-left: 10px;
    padding-top: 10px;
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
    .el-tree-node__label {
      font-size: 14px;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
  .xf-query-input,
  .xf-query-select {
    width: 200px;
    margin: 0 10px;
  }
  .addsensordialog > div {
    width: 500px;
    margin: 0 auto;
  }
  .addsensordialog .el-dialog__title {
    font-size: 32px;
  }
  .addsensordialog {
    .el-dialog__header {
      margin-top: 20px;
    }
    .custom-dialog-btn {
      position: absolute;
      font-size: 30px;
      left: 40px;
      top: 20px;
      color: #fff;
      &:hover {
        cursor: pointer;
      }
    }
    .dialog-footer {
      text-align: left;
    }
    //   带下拉选择的输入
    .tmselect .el-input {
      width: 80px;
    }
    .input-with-select .el-input-group__append {
      background-color: #fff;
    }
  }
  // 精准查询
  .xf-double-form{
    .xf-dbform-item{
      display: flex;
      justify-content: space-between;
      .xf-dbform-item__sleft{
        .el-input{
          width: 320px;
        }
      }
      .xf-dbform-item__sright{
        .el-input{
          width: 320px;
        }
      }
    }
  }
  .upload-cum{
    .el-dialog__body{
      padding-top: 0;
      min-height: 40px;
      padding-bottom: 10px;
    }
    .dialog-footer{
      text-align: left;
    }
    .el-button.is-disabled{
      background-color: #d9d9d9;
      color: #fff;
      border-color: #d9d9d9;
    }
    .upload-wrap{
      width: 100%;
      margin-top:20px;
      .el-upload{
        width:100%;
      }
    }
    .el-upload-list__item{
      padding: 8px 0;
      background: #f1f1f1;
      .el-icon-close{
        top:14px;
      }
      .el-icon-upload-success{
        vertical-align: bottom;
      }
    }
    .el-upload-dragger{
      height: 40px;
    }
    .filedisabled .el-upload{
      display: none;
    }
    .el-button--default{
      border-color: #dcdfe6;
    }
    .uploadarea{
      width: 100%;
      line-height: 16px;
      background-color: #f1f1f1;
      border-radius: 2px;
      font-size: 14px;
      color: #666;
    }
    .el-upload-list__item .el-progress{
      top: 30px;
    }
  }
  .sensor-pagination-container{
    display:flex;
    justify-content:space-between;
    padding:10px 10px;
  }
</style>
